<template>
	<div class="stock-contianer">
		<div class="stock-tray-title">
			<p>{{ details.number }}</p>
		</div>
		<van-list v-model="dataset.loading" :finished="dataset.finished" finished-text="没有更多了"
                  @load="controllerRequestList">
			<ul class="stock-listing">
				<li v-for="(item, index) in dataset.items" :key="index" @click="eventClickOpenDetails(index)">
					<p>{{ item.name }}</p>
					<!-- <p>总重量：<span>{{ item.weight }}kg</span></p> -->
					<p>总重量：<span>{{ item.number }}kg</span></p>
				</li>
			</ul>
		</van-list>
	</div>
</template>

<script>
	import { List } from 'vant';

	export default {
		name: "ReservoirManageStockTray",
		components: {
			[List.name]: List
        },
        props: ['details'],
		data() {
			return {
				dataset: {
					page: 0, limit: 30,
					loading: false, finished: false,
					items: [], token: ''
				}
			}
		},
		mounted() {
		},
		methods: {
			controllerRequestList() {
				var url = '/api/admin/tray/getone',
					params = {
						token: this.details.token,
						// child: this.$route.query.child
					};

				this.$util.postRequestInterface(url, params, (res) => {
					if (res.data.orderlist) {
						this.dataset.items = res.data.orderlist;
						this.dataset.token = res.data.token;
					}
					this.dataset.finished = true;
					this.dataset.loading = false;
				})
			},
			eventClickOpenDetails(index) {
				var { id, number } = this.dataset.items[index];

				// this.$router.push({
				// 	path: '/reservoirManagement/stock-tray-details',
				// 	query: {
				// 		token: this.dataset.token, child: id, name: number
				// 	}
                // });

                this.$emit('switchDetails', {
                    token: this.details.token, child: id, name: number
                });
			}
        },
        watch: {
            details() {
                this.dataset.items = [];
                this.dataset.finished = false;
                this.dataset.loading = false;
                this.controllerRequestList();
            }
        }
	}
</script>

<style scoped lang="scss">
	.stock-tray-title {
		padding: 0.8rem 1.6rem;
		background-color: #f4f4f4;
		color: #999999;
	}

	.stock-listing {
		li {
			padding: 1.6rem;
			display: flex;
			font-size: 1.4rem;
			border-bottom: 0.4rem solid #f4f4f4;

			p {
				color: #999999;
			}

			p:first-child {
				flex: 1;
				color: #333333;
			}

			p:last-child {
				margin-left: 1rem;
			}

			p span {
				color: #00cc00;
			}
		}
	}
</style>
